import React from 'react'
import { Row, Col, Form, Input, Button, DatePicker, Select } from 'antd'
import colors from '@/constants/colors'
import '../batchRecord/search.css'
import  '@/common/skin.css'

const FormItem = Form.Item
const { RangePicker } = DatePicker
const { Option } = Select

const Edit = (props) => {
  const { getFieldDecorator } = props.form
  const { template, remark, addButtonLoading, onChangeTemplate, onChangeRemark, onAdd } = props
  return (
    <Form>
      <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="模板">
        {getFieldDecorator('template', {
            rules: [{ required: true, message: '请输入模板!' }],
        })(
          <Input.TextArea rows={6} className="skin-text-area" placeholder="请输入模板" onChange={onChangeTemplate} />
        )}
      </FormItem>
      {/* <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 15 }} label="备注">
        <Input.TextArea className="skin-text-area" placeholder="请输入备注"  value={remark} onChange={onChangeRemark} />
      </FormItem> */}
      <FormItem>
        <Col offset={3}>
          <Button 
            type="primary" 
            style={{width: '100px'}} 
            loading={addButtonLoading} 
            onClick={() => props.form.validateFields((error) => !error && onAdd())}
          >提交模板</Button>
        </Col>
      </FormItem>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="内容规范">
        <div>
          * 必须带有【签名】，签名内容为：公司或品牌名称，字数要求2-16个字符，运营商规定必填。<br />
          * 签名只能选择审核过的签名,内容首尾不能添加【】<br />
          * 内容合法，不能发送房产、发票、移民等国家法律法规严格禁止的内容。<br />
          * 超链接地址请写在短信内容中，便于核实，部分安卓系统存在超链接识别问题，需在超链接前后添加空格。<br />
          {'变量用{s数字}代替，数字代表变量最大长度，视情况填写任意数值。例，亲爱的{s6}先生/女士。则变量位置最多填入六位昵称，超过六位则无法发送。短信发送时根据顺序依次替换为变量内容。'}
        </div>
      </FormItem>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="计费规则">
        <div>
          * 短信字数&lt;=70个字，按照70个字一条短信计算。中文英文符号统一计算为一个字符。<br />
          * 短信字数>70个字，占用3个字符作为分条字符，按照67个字记为一条短信计算，多条短信可能在部分手机系统上呈现为一条短信的形态，测试时请注意。        
        </div>
      </FormItem>
      <FormItem labelCol={{span: 3}} wrapperCol={{span: 15}} label="审核规则">
        <div>
          * 签名跟模板报备的情况下，短信发送将直接提交给网关。<br />
          * 如果出现批量短信发送驳回的情况，可能为“敏感词拦截”进入人工审核，请联系客服。        
        </div>
      </FormItem>
    </Form>
  )
}

export default Form.create({
  mapPropsToFields(props){
    return {
      template: Form.createFormField({ value: props.template })
    }
  }
})(Edit)